<template>
    <div>
        <van-nav-bar title="语言设置" left-arrow @click-left="onClickLeft" />
        <div class="language-recommend">
            <van-radio-group v-model="checked">
                <p>推荐的语言</p>
                <van-cell-group inset>
                    <van-cell title="简体中文" clickable @click="setLanguage('zh')">
                        <template #right-icon>
                            <van-radio name="1" />
                        </template>
                    </van-cell>
                    <van-cell title="英语(英国)" clickable @click="setLanguage('en')">
                        <template #right-icon>
                            <van-radio name="2" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
            <van-radio-group v-model="checked">
                <p>其他语言</p>
                <van-cell-group inset>
                    <van-cell title="简体中文" clickable @click="checked = '4'">
                        <template #right-icon>
                            <van-radio name="4" />
                        </template>
                    </van-cell>
                    <van-cell title="英语(英国)" clickable @click="checked = '5'">
                        <template #right-icon>
                            <van-radio name="5" />
                        </template>
                    </van-cell>
                    <van-cell title="英语(美国)" clickable @click="checked = '6'">
                        <template #right-icon>
                            <van-radio name="6" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </van-radio-group>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const checked = ref('1'); // 默认选中第一个单选框

import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

function setLanguage(lang) {
    locale.value = lang
    localStorage.setItem('lang', lang)
}
const onClickLeft = () => {
    // 返回上一页
    window.history.back();
};
</script>

<style scoped>
.language-recommend {
    margin-left: 2rem;
}

p {
    font-size: 0.8rem;
    font-weight: 200;
}

.van-radio-group {
    width: 95%;
}
</style>